<template>
  <div class="appointment-board">
    <!-- 顶部操作区域 -->
    <div style="display: flex; align-items: center; margin-top: 15px;">
  <el-input
    placeholder="预约用户名"
    v-model="query"
    class="input-with-select"
    :clearable="true"
    @blur="reList()"
    style="width: 200px; margin-right: 15px; margin-left: 30px;"
  >
    <el-button
      slot="append"
      icon="el-icon-search"
      @click="getAppointmentListByUsername()"
    ></el-button>
  </el-input>

  <el-date-picker
    v-model="queryByAppoint_time"
    type="date"
    placeholder="选择日期"
  ></el-date-picker>

  <el-button
    icon="el-icon-search"
    @click="getListByAppointTime()"
    style="border-left: none;"
  ></el-button>
</div>

    <!-- 表格部分 -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="appointment_pkid"
        label="记录编号"
        width="100%"
        align="center"
      >
      </el-table-column>
      <el-table-column
        fixed
        prop="service_name"
        label="项目名称"
        width="100%"
        align="center"
      >
      </el-table-column>
      <el-table-column fixed prop="username" label="预约用户" align="center">
      </el-table-column>
      <el-table-column fixed prop="pet_name" label="宠物名称" align="center">
      </el-table-column>
      <el-table-column fixed prop="doctor_name" label="主治医师" align="center">
      </el-table-column>
      <el-table-column
        fixed
        prop="appointment_date"
        label="下单时间"
        align="center"
      >
      </el-table-column>
      <el-table-column
        fixed
        prop="appointment_time"
        label="预约时间"
        align="center"
      >
      </el-table-column>
      <el-table-column
        fixed
        prop="appointment_status"
        label="服务状态"
        align="center"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button @click="editClick(scope.row)" :type="scope.row.appointment_status=='待服务'?'primary':'success'" size="small"
            >
            <span>{{scope.row.appointment_status=="待服务"?"操作":"查看" }}</span>
            </el-button>
        
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="currentPage"
      :page-sizes="[5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    ></el-pagination>
    <el-drawer
      title="预约详情"
      :visible.sync="drawer"
      :before-close="handleClose"
    >
      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <div>{{ handle_obj.service_name }}</div>
            <div v-if="handle_obj.appointment_status=='待服务'">
               <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="serviceCompleted"
              >服务完成</el-button
            >
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="serviceRefused"
            >
              <span style="color: red; margin-right: 10px">院方拒绝</span>
            </el-button> 
            </div>
            
          </div>
          <div class="text item">{{ "预约用户：" + handle_obj.username }}</div>
          <div class="text item">{{ "宠物名称：" + handle_obj.pet_name }}</div>
          <div class="text item">
            {{ "主治医师：" + handle_obj.doctor_name }}
          </div>
          <div class="text item">
            {{ "下单时间：" + handle_obj.appointment_date }}
          </div>
          <div class="text item">
            {{ "预约时间：" + handle_obj.appointment_time }}
          </div>
          <div class="text item">
            {{ "服务状态：" + handle_obj.appointment_status }}
          </div>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>
  
  <script>
import {
  getAppointmentDetailList,
  getAppointmentById,
  updateAppointmentStatus,
  addServiceRecord,
  getAppointmentListByAppointmentTime,
  getAppointmentListByUsername
} from "@/utils/request";
export default {
  data() {
    return {
      query:'',
      queryByAppoint_time:'',
      drawer: false,
      tableData: [],
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示条数
      totalItems: 0, // 总记录数
      handle_obj: "", //操作对象
    };
  },
  mounted() {
    this.getList();
  },

  methods: {
    async getList() {
      await getAppointmentDetailList()
        .then((res) => {
          this.tableData = res.data.data;
        })
        .catch((error) => {
          // 处理错误
          console.error(error);
        });
    },
    reList() {
        this.getList();
    },
    editClick(operator) {
      this.drawer = true;
      this.handle_obj = operator;
    },
    handleClose(done) {
      //   this.$confirm("确认关闭？")
      //     .then((_) => {

      //     })
      //     .catch((_) => {});
      done();
      this.handle_obj = "";
    },
    serviceCompleted() {
    //修改订单的状态（完成状态）
    updateAppointmentStatus(this.handle_obj.appointment_pkid, 1).then(() => {
      //通过操作的预约id查询到原始数据
      getAppointmentById(this.handle_obj.appointment_pkid).then((res) => {
        let obj = res.data.data; //拿到原始数据
        //生成服务记录对象数据
        let serviceRecord = {
            user_id:obj.user_pkid, // 用户id通过此字段可以查询所有记录
            pet_id:obj.pet_id,// 宠物id
            appointment_id:obj.appointment_pkid, // 预约记录id
            project_id:obj.project_id,// 项目名称
            status:1, // 订单状态：1-完成，2-院方拒绝，3-用户取消
            is_medical:obj.is_medical//是否为医疗项目
        }
        addServiceRecord(serviceRecord).then((res)=>{

        })
      });
    });
  },
  serviceRefused() {
     //修改订单的状态（拒绝状态）
     updateAppointmentStatus(this.handle_obj.appointment_pkid, 2).then(() => {
      //通过操作的预约id查询到原始数据
      getAppointmentById(this.handle_obj.appointment_pkid).then((res) => {
        let obj = res.data.data; //拿到原始数据
        //生成服务记录对象数据
        let serviceRecord = {
            user_id:obj.user_pkid, // 用户id通过此字段可以查询所有记录
            pet_id:obj.pet_id,// 宠物id
            appointment_id:obj.appointment_pkid, // 预约记录id
            project_id:obj.project_id,// 项目名称
            status:2, // 订单状态：1-完成，2-院方拒绝，3-用户取消
            is_medical:obj.is_medical//是否为医疗项目
        }
        addServiceRecord(serviceRecord).then((res)=>{
          if (this.queryByAppoint_time != "") {
            getAppointmentListByUsername(this.query)
              .then((res) => {
            this.tableData = res.data.data;
          })
          .catch((err) => {});
      }
        })
      });
    });
  },
  getListByAppointTime(){
    if (this.queryByAppoint_time != "") {
      getAppointmentListByAppointmentTime(this.queryByAppoint_time)
          .then((res) => {
            this.tableData = res.data.data;
          })
          .catch((err) => {});
      }
  },
  getAppointmentListByUsername(){
    if (this.query != "") {
      getAppointmentListByUsername(this.query)
          .then((res) => {
            this.tableData = res.data.data;
          })
          .catch((err) => {});
      }
  },
  // 分页器页码变化事件处理函数
  handleCurrentChange(newPage) {
    this.currentPage = newPage; // 更新当前页码
  },
  handleSizeChange(newSize) {
    this.pageSize = newSize; //更新每页数据条数
  },
  reList() {
    this.getList();
  },
  },
  
  
    


};
</script>
  
  <style scoped>
.el-pagination {
  position: absolute;
  bottom: 0;
  left: 45%;
  /* width: 30%; */
  bottom: 5%;
  background-color: #fff;
  z-index: 999; /* 可以根据需要设置z-index值，确保分页器显示在其他内容上方 */
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果（可选） */
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
  